<template>
  <view class="container">
     状态栏占位 
    <view class="status-bar"></view>
    
     顶部导航栏 
    <view class="header">
      <view class="header-left">
        <view class="back-btn" @tap="goBack">
          <text class="icon">←</text>
        </view>
      </view>
      <view class="header-center">
        <text class="title">讲解服务</text>
        <text class="subtitle">GUIDE SERVICE</text>
      </view>
      <view class="header-right">
        <view class="audio-btn" @tap="toggleAudio">
          <text class="icon">{{ isPlaying ? '🔊' : '🔇' }}</text>
        </view>
      </view>
    </view>

     主要内容区域 
    <scroll-view class="main-content" scroll-y>
       服务类型 
      <view class="service-section">
        <text class="section-title">讲解服务</text>
        <view class="service-grid">
          <view class="service-item" v-for="service in serviceTypes" :key="service.id" @tap="selectService(service)">
            <view class="service-icon">
              <text>{{ service.icon }}</text>
            </view>
            <view class="service-info">
              <text class="service-name">{{ service.name }}</text>
              <text class="service-desc">{{ service.description }}</text>
              <view class="service-features">
                <text class="feature" v-for="feature in service.features" :key="feature">
                  {{ feature }}
                </text>
              </view>
            </view>
            <view class="service-price">
              <text class="price">{{ service.price === 0 ? '免费' : `¥${service.price}` }}</text>
              <text class="duration">{{ service.duration }}</text>
            </view>
          </view>
        </view>
      </view>

       语音导览 
      <view class="audio-section">
        <text class="section-title">语音导览</text>
        <view class="audio-player">
          <view class="player-header">
            <view class="track-info">
              <text class="track-title">{{ currentTrack.title }}</text>
              <text class="track-desc">{{ currentTrack.description }}</text>
            </view>
            <view class="track-duration">
              <text>{{ formatTime(currentTime) }} / {{ formatTime(currentTrack.duration) }}</text>
            </view>
          </view>
          
          <view class="progress-bar">
            <view class="progress-track">
              <view class="progress-fill" :style="{ width: progressPercent + '%' }"></view>
            </view>
          </view>
          
          <view class="player-controls">
            <view class="control-btn" @tap="previousTrack">
              <text>⏮️</text>
            </view>
            <view class="control-btn play-btn" @tap="togglePlay">
              <text>{{ isPlaying ? '⏸️' : '▶️' }}</text>
            </view>
            <view class="control-btn" @tap="nextTrack">
              <text>⏭️</text>
            </view>
            <view class="control-btn" @tap="toggleSpeed">
              <text>{{ playSpeed }}x</text>
            </view>
          </view>
        </view>
        
         播放列表 
        <view class="playlist">
          <text class="playlist-title">播放列表</text>
          <view class="track-list">
            <view class="track-item" 
                  v-for="(track, index) in playlist" 
                  :key="track.id"
                  :class="{ active: currentTrackIndex === index }"
                  @tap="playTrack(index)">
              <view class="track-number">
                <text>{{ index + 1 }}</text>
              </view>
              <view class="track-content">
                <text class="track-name">{{ track.title }}</text>
                <text class="track-location">{{ track.location }}</text>
              </view>
              <view class="track-status">
                <text class="track-time">{{ formatTime(track.duration) }}</text>
                <text class="play-icon" v-if="currentTrackIndex === index && isPlaying">🔊</text>
              </view>
            </view>
          </view>
        </view>
      </view>

       专业导游 
      <view class="guide-section">
        <text class="section-title">专业导游</text>
        <view class="guide-list">
          <view class="guide-item" v-for="guide in guideList" :key="guide.id" @tap="bookGuide(guide)">
            <view class="guide-avatar">
              <text class="avatar-placeholder">{{ guide.name.substring(0, 1) }}</text>
              <view class="guide-status" :class="guide.status">
                <text>{{ guide.statusText }}</text>
              </view>
            </view>
            <view class="guide-info">
              <text class="guide-name">{{ guide.name }}</text>
              <text class="guide-title">{{ guide.title }}</text>
              <view class="guide-skills">
                <text class="skill" v-for="skill in guide.skills" :key="skill">
                  {{ skill }}
                </text>
              </view>
              <view class="guide-stats">
                <text class="stat">⭐ {{ guide.rating }}</text>
                <text class="stat">👥 {{ guide.tours }}次导览</text>
                <text class="stat">🗣️ {{ guide.languages.join('、') }}</text>
              </view>
            </view>
            <view class="guide-price">
              <text class="price">¥{{ guide.price }}</text>
              <text class="unit">/小时</text>
            </view>
          </view>
        </view>
      </view>

       团体预约 
      <view class="group-section">
        <text class="section-title">团体预约</text>
        <view class="group-card">
          <view class="group-info">
            <text class="group-title">团体讲解服务</text>
            <text class="group-desc">适合10人以上团体，提供专业定制化讲解服务</text>
            <view class="group-features">
              <view class="feature-item">
                <text class="feature-icon">👥</text>
                <text class="feature-text">专业团队导游</text>
              </view>
              <view class="feature-item">
                <text class="feature-icon">📋</text>
                <text class="feature-text">定制讲解路线</text>
              </view>
              <view class="feature-item">
                <text class="feature-icon">🎧</text>
                <text class="feature-text">无线讲解设备</text>
              </view>
              <view class="feature-item">
                <text class="feature-icon">📚</text>
                <text class="feature-text">专业资料包</text>
              </view>
            </view>
          </view>
          <view class="group-action">
            <view class="contact-btn" @tap="contactGroup">
              <text>联系预约</text>
            </view>
          </view>
        </view>
      </view>

       使用说明 
      <view class="instruction-section">
        <text class="section-title">使用说明</text>
        <view class="instruction-card">
          <view class="instruction-item" v-for="instruction in instructions" :key="instruction.id">
            <view class="instruction-step">
              <text>{{ instruction.step }}</text>
            </view>
            <view class="instruction-content">
              <text class="instruction-title">{{ instruction.title }}</text>
              <text class="instruction-desc">{{ instruction.description }}</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'

const isPlaying = ref(false)
const currentTime = ref(0)
const currentTrackIndex = ref(0)
const playSpeed = ref(1)

const serviceTypes = ref([
  {
    id: 1,
    name: '语音导览',
    description: '手机自助语音讲解',
    icon: '🎧',
    price: 0,
    duration: '不限时',
    features: ['多语言支持', '随时暂停', '重复播放']
  },
  {
    id: 2,
    name: '人工讲解',
    description: '专业导游现场讲解',
    icon: '👨‍🏫',
    price: 150,
    duration: '2小时',
    features: ['专业导游', '互动问答', '深度讲解']
  },
  {
    id: 3,
    name: 'VR体验',
    description: '虚拟现实沉浸体验',
    icon: '🥽',
    price: 30,
    duration: '30分钟',
    features: ['沉浸体验', '历史重现', '互动操作']
  }
])

const currentTrack = ref({
  title: '武夷山摩崖石刻概述',
  description: '了解武夷山摩崖石刻的历史背景和文化价值',
  duration: 180
})

const playlist = ref([
  { id: 1, title: '武夷山摩崖石刻概述', location: '博物馆入口', duration: 180 },
  { id: 2, title: '朱熹理学思想', location: '理学文化厅', duration: 240 },
  { id: 3, title: '历代书法艺术', location: '书法艺术厅', duration: 200 },
  { id: 4, title: '天游峰石刻群', location: '历史文化厅', duration: 300 },
  { id: 5, title: '九曲溪摩崖', location: '历史文化厅', duration: 220 }
])

const guideList = ref([
  {
    id: 1,
    name: '李明',
    title: '高级讲解员',
    rating: 4.9,
    tours: 1200,
    price: 200,
    status: 'available',
    statusText: '可预约',
    languages: ['中文', '英文'],
    skills: ['历史文化', '书法艺术', '理学思想']
  },
  {
    id: 2,
    name: '王芳',
    title: '资深导游',
    rating: 4.8,
    tours: 800,
    price: 180,
    status: 'busy',
    statusText: '忙碌中',
    languages: ['中文', '日文'],
    skills: ['摩崖石刻', '地质地貌', '文物保护']
  },
  {
    id: 3,
    name: '张伟',
    title: '专业讲解员',
    rating: 4.7,
    tours: 600,
    price: 150,
    status: 'available',
    statusText: '可预约',
    languages: ['中文'],
    skills: ['武夷文化', '茶文化', '民俗风情']
  }
])

const instructions = ref([
  {
    id: 1,
    step: '1',
    title: '选择服务类型',
    description: '根据需求选择语音导览、人工讲解或VR体验'
  },
  {
    id: 2,
    step: '2',
    title: '扫码或下载',
    description: '扫描展品旁的二维码或下载语音导览APP'
  },
  {
    id: 3,
    step: '3',
    title: '开始体验',
    description: '佩戴耳机，按照提示开始讲解服务'
  },
  {
    id: 4,
    step: '4',
    title: '互动反馈',
    description: '体验结束后可以评价和反馈服务质量'
  }
])

const progressPercent = computed(() => {
  return currentTrack.value.duration > 0 ? (currentTime.value / currentTrack.value.duration) * 100 : 0
})

const formatTime = (seconds) => {
  const mins = Math.floor(seconds / 60)
  const secs = seconds % 60
  return `${mins}:${secs.toString().padStart(2, '0')}`
}

const selectService = (service) => {
  console.log('选择服务:', service.name)
}

const toggleAudio = () => {
  console.log('切换音频')
}

const togglePlay = () => {
  isPlaying.value = !isPlaying.value
}

const previousTrack = () => {
  if (currentTrackIndex.value > 0) {
    currentTrackIndex.value--
    currentTrack.value = playlist.value[currentTrackIndex.value]
  }
}

const nextTrack = () => {
  if (currentTrackIndex.value < playlist.value.length - 1) {
    currentTrackIndex.value++
    currentTrack.value = playlist.value[currentTrackIndex.value]
  }
}

const toggleSpeed = () => {
  const speeds = [1, 1.25, 1.5, 2]
  const currentIndex = speeds.indexOf(playSpeed.value)
  playSpeed.value = speeds[(currentIndex + 1) % speeds.length]
}

const playTrack = (index) => {
  currentTrackIndex.value = index
  currentTrack.value = playlist.value[index]
  isPlaying.value = true
}

const bookGuide = (guide) => {
  console.log('预约导游:', guide.name)
}

const contactGroup = () => {
  console.log('联系团体预约')
}

const goBack = () => {
  console.log('返回上一页')
}
</script>

<style scoped>
.container {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(180deg, #e8f5e8 0%, #c8e6c9 50%, #81c784 100%);
  color: #2e7d32;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.status-bar {
  height: 44px;
  width: 100%;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.header-left, .header-right {
  display: flex;
  align-items: center;
}

.back-btn, .audio-btn {
  width: 36px;
  height: 36px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.header-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.title {
  display: block;
  font-size: 18px;
  font-weight: bold;
  color: #1b5e20;
}

.subtitle {
  display: block;
  font-size: 11px;
  color: #4caf50;
  margin-top: 2px;
  letter-spacing: 1px;
}

.main-content {
  flex: 1;
  width: 100%;
  padding: 0 16px;
  box-sizing: border-box;
  height: 100%;
  overflow-y: auto;
}

.service-section, .audio-section, .guide-section, .group-section, .instruction-section {
  margin-bottom: 24px;
}

.section-title {
  font-size: 20px;
  font-weight: bold;
  color: #1b5e20;
  margin-bottom: 16px;
  display: block;
}

.service-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.service-item {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  width: 100%;
  box-sizing: border-box;
}

.service-icon {
  width: 48px;
  height: 48px;
  background: #4caf50;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.service-info {
  flex: 1;
  min-width: 0;
}

.service-name {
  display: block;
  font-size: 16px;
  font-weight: bold;
  color: #1b5e20;
  margin-bottom: 4px;
}

.service-desc {
  display: block;
  font-size: 14px;
  color: #4caf50;
  margin-bottom: 8px;
}

.service-features {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.feature {
  background: #f1f8e9;
  color: #2e7d32;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 12px;
}

.service-price {
  text-align: right;
  flex-shrink: 0;
}

.price {
  display: block;
  font-size: 18px;
  font-weight: bold;
  color: #1b5e20;
}

.duration {
  font-size: 12px;
  color: #4caf50;
}

.audio-player, .playlist, .guide-list, .guide-item, .group-card, .instruction-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  width: 100%;
  box-sizing: border-box;
}

.player-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.control-btn {
  width: 44px;
  height: 44px;
  background: #4caf50;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: white;
}

.play-btn {
  width: 52px;
  height: 52px;
  font-size: 18px;
}

.guide-item {
  margin-bottom: 16px;
}

.guide-avatar {
  width: 60px;
  height: 60px;
  background: #4caf50;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
  color: white;
  position: relative;
  flex-shrink: 0;
}

.guide-status {
  position: absolute;
  bottom: -2px;
  right: -2px;
  padding: 2px 6px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: bold;
}

.guide-status.available {
  background: #4caf50;
  color: white;
}

.guide-status.busy {
  background: #ff9800;
  color: white;
}

.contact-btn {
  background: #4caf50;
  color: white;
  padding: 12px 24px;
  border-radius: 20px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
}
</style>
  